<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>2.6节,限制只能输入数字</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>限制只能输入数字</h2>
<form>
    <input type="number" name="numberHtml5"  value='html5只能输入数字' id='banNumberHtml5'/><br>
    <input type="text" value='html5只能输入数字'  pattern=[0-9] id='patternHtml5'/>
    <input type="text" name="number"  value='只能输入数字' id='banNumber'/><br>
    <input type='submit' value='提交'>
</form>
<script type="text/javascript">
    window.onload = function(){
        var banNumber = document.getElementById("banNumber"),
                clearNonumber = function(tThis){		//过滤数字
                    var _v = tThis.value;
                    tThis.value = _v.replace(/\D/g,"");
                }
        banNumber.onfocus = function(){			//绑定获取焦点事件
            clearNonumber(this);
        }
        banNumber.onkeyup = function(){			//绑定键盘事件
            clearNonumber(this);
        }
        banNumber.onblur = function(){				//失去焦点事件
            clearNonumber(this);
        }
    };
</script>
</body>
</html>